<template>
  <div>
    <div class="top" style="
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-evenly;
        gap: 3rem;
        padding: 1rem 0;
      ">
      <buttton class="btn" @click="add">新增</buttton>
      <buttton class="btn" @click="look">查看</buttton>
      <buttton class="btn">编辑</buttton>
      <buttton class="btn" @click="delData">删除</buttton>
    </div>

    <div v-loading="loading" element-loading-text="Loading..."
      style="width: 100%; display: flex; flex-wrap: wrap; gap: 4rem">
      <div :class="detail._id == i._id ? 'active card' : 'card'" v-for="i in workerList" :key="i._id"
        style="width: 23.5rem; height: 180px; display: flex; gap: 5%" @click="detail = i">
        <img v-if="i.photoUrl" :src="i.photoUrl" style="width: 40%; height: 150px; border: 5px solid lightblue" />
        <div v-else style="width: 40%; height: 150px; border: 5px solid lightblue">
          暂无照片
        </div>
        <div style="width: 45%; display: flex; flex-direction: column; gap: 0.5rem">
          <span style="font-weight: bold">{{ i.name }}</span>
          <span>性别：{{ i.sex }}</span>
          <span>年龄：{{ i.age }}</span>
          <span>签名：{{ i.bio }}</span>
          <span>特长：<span v-for="j in i.specialties" :key="j">{{
            j
          }}</span></span>
          <span>联系电话：{{ i.phone }}</span>
        </div>
      </div>
    </div>
  </div>
  <addDialog :draggable="true" v-model="addShow" @close="addShow = false">
    <template #title>
      <h3>新增员工</h3>
    </template>
    <template #default>
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="addForm.sex">
            <el-radio label="男" value="男">男</el-radio>
            <el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="addForm.age" />
        </el-form-item>
        <el-form-item label="签名">
          <el-input v-model="addForm.bio" />
        </el-form-item>
        <el-form-item label="特长">
          <el-input v-model="addForm.specialties" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="addForm.phone" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <button @click="closeDialog">取消</button>
      <button @click="addData">提交</button>
    </template>
  </addDialog>
  <lookDialog v-model="lookShow" @closeDialog="lookShow = false" :draggable="true">
    <template #title>
      <h3>{{ detail.name }}详情</h3>
    </template>
    <template #default>
      <el-form :model="detail" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="detail.name" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="detail.sex">
            <el-radio label="男" value="男">男</el-radio>
            <el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="detail.age" />
        </el-form-item>
        <el-form-item label="签名">
          <el-input v-model="detail.bio" />
        </el-form-item>
        <el-form-item label="特长">
          <el-input v-model="detail.specialties" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="detail.phone" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button type="primary" round @click="lookShow=false">关闭</el-button>
    </template>
  </lookDialog>
</template>

<script setup>
import { get, post, del } from "@/util/request";
import { onMounted, ref } from "vue";
import { useCounterStore } from "@/stores/counter";
import addDialog from "@/component/dialog.vue";
import lookDialog from "@/component/dialog.vue";
import { ElMessage  } from "element-plus";
// 加载
const loading = ref(false);
const lookShow=ref(false)
const workerList = ref([]);
const store = useCounterStore();
console.log(store.info.salonId, "理发店id");
const openFullScreen1 = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    getWorkerList();
  }, 500);
};
const getWorkerList = async () => {
  workerList.value = [];
  const {
    data: { data, code },
  } = await get("/shopfront/getstylist");
  if (code == 200) {
    data.forEach((item) => {
      console.log(item.salonId);
      if (item.salonId._id == store.info.salonId) {
        workerList.value.push(item);
      }
    });
  }

};
// 添加
const info = ref({});
const addForm = ref({
  name: "",
  bio: "",
  phone: "",
  sex: "",
  age: 0,
  secialties: "",
});
const add = () => {
  addShow.value = true;
};
//获取整条数据
const detail = ref({});

// 添加
const addShow = ref(false);
onMounted(() => {
  openFullScreen1();
  // getWorkerList();
});
const closeDialog = () => {
  addShow.value = false;
  addForm.value = {};
};
const addData = async () => {
  console.log(addForm.value, "addForm");
  const {
    data: { code },
  } = await post("/shopfront/addstylist", {
    ...addForm,
    salonId: store.info.salonId,
  });
  if (code == 200) {
    ElMessage({
      message: "恭喜！又多了一员得力干将",
      type: "success",
    });
    workerList.value = [];
    openFullScreen1()
    addShow.value = false;
    addForm.value = {};
  } else {
    ElMessage.error("出错了，请重试");
    addForm.value = {};
  }
};
// 删除
const delData = async () => {
  // if (confirm('确定要删除吗？')) {
  if (detail.value._id) {
    let { data: { code, data } } = await del(`/shopfront/delstylist/${detail.value._id}`)
    if (code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      detail.value = {};
      openFullScreen1()
    } else {
      ElMessage.error("出错了，请重试");
    }
  } else {
    ElMessage({
      message: "至少选择一个",
      type: "warning",
    });
  }
  // }
}
// 编辑
const edit = async () => {

}
// 详情
const look=()=>{
  if(detail.value._id){
    lookShow.value=true
  }else{
    ElMessage({
      message: "至少选择一个",
      type: "warning",
    });
  }
}
</script>

<style scoped>
.card {
  /* 阴影 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
}

.btn {
  width: 100px;
  height: 40px;
  text-align: center;
  align-content: center;
  background-color: aqua;
  border-radius: 20px;
}

.btn:last-child {
  background-color: rgb(239, 91, 91);
  color: white;
}

.active {
  box-shadow: 0 0 10px rgba(46, 191, 75, 0.8);
}
</style>
